  <!-- 遍历菜单数据 -->
<template>
  <!-- 遍历菜单数据 -->
  <template v-for="menu in menus" :key="menu.menuId">
    <!-- 如果有子菜单，使用 el-sub-menu -->
    <el-sub-menu v-if="menu.children && menu.children.length" :index="menu.menuId">
      <!-- 子菜单标题 -->
      <template #title>
        <span>{{ menu.menuName }}</span>
      </template>
      <!-- 递归渲染子菜单 -->
      <MenuTree :menus="menu.children" />
    </el-sub-menu>
    <!-- 如果没有子菜单，使用 el-menu-item -->
    <el-menu-item v-else :index="menu.url">
      <span>{{ menu.menuName }}</span>
    </el-menu-item>
  </template>
</template>

<script setup>
// 定义 props
defineProps({
  menus: {
    type: Array,
    required: true,
  },
});
</script>